<template>
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="increment">修改count</button>
    <hr>

    <p>{{ user.age }}</p>
    <p>{{ age }}</p>
    <button @click="age++">修改age</button>
    <hr>

    <p>{{ user.name }}</p>
    <p>{{ name }}</p>
    <button @click="name='alice'">修改name</button>

</template>

<script setup>
// 导入函数
import { toRefs } from 'vue';
import { toRef } from 'vue';
import {reactive, ref} from 'vue'


/**
 * reactive函数
 */
// 普通对象，不具有响应式
// const user = {
//     name: 'tom',
//     age: 18
// }

// 创建响应式对象，是一个代理对象
const user = reactive({
    name: 'tom',
    age: 18
})
// console.log(user)

function change(){
    // console.log(this)  // 无法访问this，也不需要this
    user.name = 'jack'
    console.log(user.name)
}


/**
 * ref函数
 */
var count = ref(1)
// console.log(count.value)


var increment = function (){
    count.value++
}


/**
 * toRef函数
 */
var age = toRef(user, 'age')

/**
 * toRefs函数
 */
var userRef = toRefs(user)
console.log(userRef)
var {name, age} = userRef // 对象的解构赋值

// var stu = {
//     name: 'tom',
//     age: 18,
//     sex: 'male'
// }

// var name = stu.name 
// var age = stu.age 
// var sex = stu.sex

// var {name, age, sex} = stu

</script>

<style scoped>

</style>